import Taro from '@tarojs/taro';
import {View, Image, Text} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {actionCreator} from "../../../store/actions";
import {appConfig, request} from '../../../utils/index';
import TopModal from "../../../components/top-modal/topModal";
import './trainList.scss';
import none from "../../../asset/images/none.png";
import Home from "../../../asset/images/home.png";
import search from '../../../asset/images/search_icon.png';
import Xinxin from '../../../asset/images/xinxin.png';
import Gd from "../../../asset/images/gd.png";

class TrainList extends Taro.Component {
    config = {
        navigationBarTitleText: '教练',
        navigationBarBackgroundColor: '#ffffff'
    };

    state = {
        typeNameWrap: [], //类型数组
        classScaleId: -1, //团课规模ID
        classTypeId: -1, //课程类型ID
        periodId: -1, //时间段区间ID
        priceId: -1, //	价格区间ID
        regionId: 340102, //区域ID
        sexFlag: null, //性别 0 女 1 男
        listData: [],
        regionStatus: 3,
        modelStatus: false,
        quanIxStatus: false, //判断是否有筛选条件
    };

    componentDidMount() {
        const {getData} = this.props;
        const option = this.$router.params;
        this.setState({
            typeNameWrap: getData.classTypes,
            classTypeId: option.typeNameId || -1,
            regionId: option.typeAreaId,
            classScaleId: option.classScaleId || -1,  //人数
            periodId: option.periodId || -1, //时间
            regionStatus: option.regionStatusNext,
            priceId: option.moneyId,
        }, () => {
            this.getList() //列表
        });
    }

    //列表
    getList = () => {
        const {classScaleId, classTypeId, periodId, priceId, regionId, regionStatus, sexFlag} = this.state;
        const params = {
            url: '/wx/firstPage/getPopularCoachList',
            data:{
                classScaleId, //团课规模ID
                classTypeId, //课程类型ID
                periodId, //时间段区间ID
                priceId, //价格区间ID
                regionId, //区域ID
                sexFlag, //性别 0 女 1 男
                queryType: regionStatus == -1 ? 3 : 1
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    this.setState({
                        listData: res.data,
                    })
                }
            }
        })
    };

    getTypes = (item) => {
        console.log(item.regionStatus + 'zhao')
        const {regionId, priceId} = this.state;
        this.setState({
            classScaleId: Number(item.selectList) || -1, //1v1
            periodId: Number(item.tgTypeId) || -1, //时间段
            regionId: Number(item.regionId), //地区
            regionStatus: item.regionStatus,
            classTypeId: Number(item.classTypeId) ||-1, //课程类型
            priceId: Number(item.moneyId) || -1, //价格id
            sexFlag: item.sexFlagIs,//性别 0 女 1 男
            quanIxStatus: item.quanIxStatus, //判断是否有筛选条件
            modelStatus: false,
        }, () => {
            this.setState({
                regionId: item.regionId || regionId,
            }, () => {
                this.getList() //获取课程列表
            })
        })
    };

    //跳转教练详情
    skipTrainDetail = (id) => {
        Taro.navigateTo({
            url: '../train-detail/trainDetail?id=' + id
        })
    };

    onChangeType = (name, res) => {
        const {typeNameWrap} = this.state;
        let nameId = '';
        if(name == 'typeName') {
            nameId = typeNameWrap[res].classTypeID;
            this.setState({
                classTypeId: nameId,
                quanIxStatus: res == 0 ? false : true,
            }, () => {
                this.getList();
            });
        }
    };

    // getTimers = (time) => {
    //     this.setState({
    //         classDate: time
    //     }, () => {
    //         this.getList() //获取课程列表
    //     });
    // };

    skipIndex = () => {
        Taro.navigateBack({
            delta: 1
        })
    };

    showModel = () => {
        this.setState(prevState => ({
            modelStatus: !prevState.modelStatus
        }))
    };

    render() {
        const {listData, modelStatus, regionId, regionStatus, typeNameWrap, classTypeId, priceId, classScaleId, sexFlag, quanIxStatus} = this.state;
        return (
            <View className="page">
                <View className="course-head">
                    <View className="leixin-list-wrap flex-lr">
                        <View className="leixin-list">
                            {typeNameWrap.map((item, index) => (
                                <View className={`list-item ${(classTypeId == item.classTypeID) ? 'list-item-active' : ''}`} key={index} onClick={this.onChangeType.bind(this, 'typeName', index)}>
                                    {/*<Image className="leixin-item-img" src={classTypeId == item.classTypeID ? item.selectedAvatar : item.avatar}/>*/}
                                    <View>{item.classTypeName}</View>
                                    <View className={`${(classTypeId == item.classTypeID) ? 'list-active-heng' : ''}`}></View>
                                </View>
                            ))}
                        </View>
                        <View className={`leixin-Gd-wrap flex-center ${quanIxStatus ? 'leixin-Gd-wrap-in' : ''}`} onClick={this.showModel}>
                            <Image className="leixin-Gd-img" src={Gd}/>
                            <View>筛选</View>
                        </View>
                    </View>
                    {/*<View className="keep-content-list">*/}
                    {/*    <SelectList onTimer={this.getTimers}/>*/}
                    {/*</View>*/}
                </View>
                <View className="course-content">
                    <View className="keep-content-coach">
                        {listData && listData.map((item, index) => (
                            <View className="keep-content-lists"  key={index} onClick={this.skipTrainDetail.bind(this, item.coachId)}>
                                <Image className="content-list-img" src={item.avatar} mode="widthFix"/>
                                <View className="content-list-wraps">
                                    <View className="coach-name">{item.coachName}</View>
                                    <View className="coach-title text-overflow">{item.description}</View>
                                    <View className="coach-price flex-l">
                                        <View className="num">¥{item.price}</View>
                                        <View>/课时起 </View>
                                        <View className="line_m">¥{item.comparePrice}</View>
                                    </View>
                                </View>
                            </View>
                        ))}
                    </View>
                </View>
                {listData && listData.length == 0 &&(
                    <View className="none">
                        <Image src={none}/>
                        <View>暂无数据</View>
                    </View>
                )}
                {modelStatus &&(
                    <TopModal
                        getClassTypeId={classTypeId} //类型id
                        getPriceId={priceId} //价格id
                        onClose={this.showModel}
                        getRegionId={regionId} //区域id
                        onRegionStatus={regionStatus}
                        getClassScaleId={classScaleId} //类型id 一对一  一对多
                        getSexFlagIs={sexFlag} //性别 0 女 1 男
                        getType={1} // 1 性别男女显示
                        onExport={this.getTypes}
                    />
                )}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {userToken,getData} = state;
    return {
        userToken,
        getData,
    }
};

const mapDispatchToProps = {
    setUserToken: actionCreator.setUserToken,
};

export default connect(mapStateToProps, mapDispatchToProps)(TrainList);



